<template>
  <div>
    <!-- 地图 -->
    <div class="translate">
      <!-- 文字 -->

      <!-- 地图 -->
      <div class="Map_box">
        <div class="map">
          <div ref="china" style="height: 680px; width: 1200px">地图2</div>
        </div>
        <!-- tabs切换 -->
        <div class="zhan"></div>
      </div>
    </div>
    <div></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, reactive, computed } from "vue";
import * as echarts from "echarts";

import chinaJSON from "../../assets/json/china.json";

import { businessMapTabs } from "../../Api/market/index";
const china = ref();

//数据纯属虚构

let data1 = [];
var yData = [] as any;
var barData = [] as any;
const from = reactive({
  product_name: "阀门", //阀门
  value: "", //全部地区
  onTime: [], //开始时间
  cgs: "", //采购商类型
  pinpai: "", //品牌
  ssfw: "", //搜索范围
  ppms: "", //匹配模式
  pcc: "", //排除词
  bhc: "", //包含词
});
// 地图接口
function Map() {
  businessMapTabs({ product_name: from.product_name }).then((res) => {
    console.log(res.data.data, "111");
    data1 = res.data.data;
    for (var i = 0; i < 10; i++) {
      barData.push(data1[i]);
      yData.push(i + data1[i].name);
    }
    MapBar(data1, yData);
  });
}
function MapBar(data1, yData) {
  var myChart = echarts.init(china.value);
  echarts.registerMap("china", chinaJSON as any); //注册可用的地图
  var option = {
    title: [
      {
        show: true,
        text: "",
        textStyle: {
          color: "#2D3E53",
          fontSize: 18,
        },
        right: 150,
        top: 10,
      },
    ],
    tooltip: {
      show: true,
      formatter: (params: any) => {
        console.log(params, "dwweqweqw");
        return params.name + "：" + params.data["value"];
      },
    },
    visualMap: {
      type: "continuous",
      orient: "horizontal",
      itemWidth: 10,
      itemHeight: 80,
      text: ["高", "低"],
      showLabel: true,
      seriesIndex: [0],
      min: 0,
      max: 2,
      inRange: {
        color: ["#6FCF6A", "#FFFD64", "#FF5000"],
      },
      textStyle: {
        color: "#7B93A7",
      },
      bottom: 30,
      left: "left",
    },
    grid: {
      right: 100,
      top: 10,
      bottom: 150,
      width: "20%",
    },
    xAxis: {
      show: false,
    },
    yAxis: {
      type: "category",
      inverse: true,
      nameGap: 16,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#ddd",
        },
      },
      axisTick: {
        show: false,
        lineStyle: {
          color: "#ddd",
        },
      },
      axisLabel: {
        interval: 0,
        margin: 85,
        textStyle: {
          color: "#000",
          align: "left",
          fontSize: 14,
        },
        rich: {
          a: {
            color: "#fff",
            backgroundColor: "#FAAA39",
            width: 20,
            height: 20,
            align: "center",
            borderRadius: 2,
          },
          b: {
            color: "#fff",
            backgroundColor: "#4197FD",
            width: 20,
            height: 20,
            align: "center",
            borderRadius: 2,
          },
        },
        formatter: function (params) {
          if (parseInt(params.slice(0, 1)) < 3) {
            return [
              "{a|" +
                (parseInt(params.slice(0, 1)) + 1) +
                "}" +
                "  " +
                params.slice(1),
            ].join("\n");
          } else {
            return [
              "{b|" +
                (parseInt(params.slice(0, 1)) + 1) +
                "}" +
                "  " +
                params.slice(1),
            ].join("\n");
          }
        },
      },
      data: yData,
    },

    // 地图
    geo: {
      roam: false,
      map: "china",
      left: "0",
      right: "500",
      zoom: 0.8, //地图显示比例
      top: -40, //地图距离上边框距离
      // layoutSize: '80%',
      label: {
        emphasis: {
          //   show: false,
          areaColor: "#55b89e", //鼠标移入颜色
          shadowOffsetX: 0, //阴影水平方向上偏移量
          shadowOffsetY: 0, //阴影垂直方向上偏移量
          borderWidth: 0, //描边现况宽
        },
      },
      itemStyle: {
        normal: {
          borderColor: "rgba(13, 38, 77, .3)",
          borderWidth: 1,
          areaColor: "#c5e7de",
        },
        emphasis: {
          areaColor: "#55b89e",
        },
      },
    },
    series: [
      {
        name: "mapSer",
        type: "map",
        roam: false,
        geoIndex: 0,
        label: {
          show: false,
        },
        // data: dBar.value,
        data: data1,
      },
      {
        name: "barSer",
        type: "bar",
        roam: false,
        visualMap: false,
        zlevel: 2,
        barMaxWidth: 8,
        barGap: 0,
        itemStyle: {
          areaColor: "#c5e7de",
          normal: {
            color: function (params) {
              // build a color map as your need.
              var colorList = [
                {
                  colorStops: [
                    {
                      offset: 0,
                      color: "#FFD119", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#FFAC4C", // 100% 处的颜色
                    },
                  ],
                },
                {
                  colorStops: [
                    {
                      offset: 0,
                      color: "#00C0FA", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#2F95FA", // 100% 处的颜色
                    },
                  ],
                },
              ];
              if (params.dataIndex < 3) {
                return colorList[0];
              } else {
                return colorList[1];
              }
            },
            barBorderRadius: 15,
          },
        },
        data: barData,
      },
    ],
  };
  myChart.setOption(option);
}

onMounted(() => {
  Map();
  MapBar();
});
</script>

<style lang="scss" scoped></style>
